<template>
	<div class="detail_content" v-loading="boxloading">
		<!-- 返回 -->
		<HyPageHeader :title="deta.title" class="cursor-pointer" />
		<!-- 详情区 -->
		<div class="detail_box">
			<div class="detail">
				<!-- 评审进度 -->
				<Schedule style="margin-bottom: 10px" v-if="deta.processInstanceId" :processInstanceId="deta.processInstanceId" />
				<div class="detail_left">
					<!-- 应用信息 -->
					<div class="Unit_Information">
						<HyCard title="应用信息">
							<Unit :message="data?.info" />
						</HyCard>
					</div>
					<!-- 应用开发前期 -->
					<div class="Unit_Information">
						<kouJibm :message="data?.info" />
					</div>
					<!-- 申报进来只展示通过的变更信息 -->
					<template v-if="deta.pageTap == 'impDec' || deta.pageTap == 'impDecs'">
						<!-- 变更信息 -->
						<div class="Unit_Information" v-if="data?.change?.appCode && ['3'].indexOf(data?.change?.status) >= 0">
							<HyCard title="变更信息">
								<chengInfo :message="data.change" />
							</HyCard>
						</div>
						<!-- 终止信息 -->
						<div class="Unit_Information" v-if="data?.terminate?.appCode && ['3'].indexOf(data?.terminate?.status) >= 0">
							<HyCard title="终止信息">
								<endApp :message="data.terminate" />
							</HyCard>
						</div>
					</template>
					<!-- 变更进来只展示通过的终止信息 -->
					<template v-if="deta.pageTap == 'appChang' || deta.pageTap == 'appChangs'">
						<!-- 变更信息 -->
						<div class="Unit_Information" v-if="data?.change?.appCode">
							<HyCard title="变更信息">
								<chengInfo :message="data.change" />
							</HyCard>
						</div>
						<!-- 终止信息 -->
						<div class="Unit_Information" v-if="data?.terminate?.appCode && ['3'].indexOf(data?.terminate?.status) >= 0">
							<HyCard title="终止信息">
								<endApp :message="data.terminate" />
							</HyCard>
						</div>
					</template>

					<!-- 终止进来只展示通过的变更信息 -->
					<template v-if="deta.pageTap == 'implTer' || deta.pageTap == 'implTers'">
						<!-- 变更信息 -->
						<div class="Unit_Information" v-if="data?.change?.appCode && ['3'].indexOf(data?.change?.status) >= 0">
							<HyCard title="变更信息">
								<chengInfo :message="data.change" />
							</HyCard>
						</div>
						<!-- 终止信息 -->
						<div class="Unit_Information" v-if="data?.terminate?.appCode">
							<HyCard title="终止信息">
								<endApp :message="data.terminate" />
							</HyCard>
						</div>
					</template>

					<!-- 应用验收信息 -->
					<div class="Unit_Information" v-if="data?.appCheck?.securityLevel">
						<HyCard title="应用验收信息">
							<accep :message="data.appCheck" />
						</HyCard>
					</div>
					<!-- 留痕轨迹 -->
					<History v-if="deta.processInstanceId" :processInstanceId="deta.processInstanceId" />
				</div>
			</div>

			<!-- 按钮框============================================ -->
			<!-- 应用实施申报 -->
			<div class="fill_app_box" v-if="deta.pageTap == 'impDec' && deta.canCancel">
				<!-- 待申报 -->
				<div class="item_box" v-if="deta.status == 1 || deta.status == 4">
					<el-button plain class="wihte-button" @click="toEdit">编辑</el-button>
					<el-button plain class="blue-button" @click="declare">申报</el-button>
					<el-button plain class="red-button" @click="appDel">删除</el-button>
				</div>
				<!-- 申报中 -->
				<div class="item_box" v-if="deta.status == 2">
					<el-button plain class="red-button" @click="reAppWithdraw">撤销</el-button>
				</div>
				<!-- 通过 -->
				<div class="item_box" v-if="deta.status == 3">
					<el-button plain class="wihte-button" @click="toApplication(1)">填写中后期资料</el-button>
					<el-button
						plain
						class="red-button"
						@click="toApplication(2)"
						v-if="['1', '4'].indexOf(deta.logStatus) != -1 && deta.checkFlag == '0' && deta.changeFlag != '1'"
						>应用变更</el-button
					>
					<el-button
						plain
						class="red-button"
						@click="toApplication(3)"
						v-if="['1', '4'].indexOf(deta.logStatus) != -1 && deta.checkFlag == '0' && deta.changeFlag != '1'"
						>应用终止</el-button
					>
					<el-button plain class="blue-button" @click="toApplication(4)" v-if="deta.checkFlag == '0' && deta.changeFlag != '1'">应用验收</el-button>
				</div>
			</div>

			<!-- 应用实施申报审核 -->
			<div class="fill_app_box" v-if="deta.pageTap == 'impDecs' && showBox">
				<!-- 待审核 -->
				<div class="item_box" v-if="deta.status == 1">
					<el-button plain class="blue-button" @click="openBox">审核</el-button>
				</div>
			</div>

			<!-- 应用需求变更 -->
			<div class="fill_app_box" v-if="deta.pageTap == 'appChang' && deta.canCancel">
				<!-- 待申报  不通过-->
				<div class="item_box" v-if="deta.status == 1 || deta.status == 4">
					<el-button plain class="wihte-button" @click="reToEdit">编辑</el-button>
					<el-button plain class="blue-button" @click="reDeclare">申报</el-button>
					<el-button plain class="red-button" @click="reAppDel">删除</el-button>
				</div>
				<!-- 申报中 -->
				<div class="item_box" v-if="deta.status == 2">
					<el-button plain class="red-button" @click="reAppWithdraw">撤销</el-button>
				</div>
				<!-- 通过 -->
				<div class="item_box" v-if="deta.status == 3">
					<el-button plain class="wihte-button" @click="reToApplication(1)">填写中后期资料</el-button>
					<el-button
						v-if="['1', '4'].indexOf(deta.logStatus) != -1 && deta.checkFlag == '0' && deta.changeFlag != '1'"
						plain
						class="red-button"
						@click="reToApplication(3)"
						>应用终止</el-button
					>
					<el-button v-if="deta.checkFlag == '0' && deta.changeFlag != '1'" plain class="blue-button" @click="reToApplication(4)">应用验收</el-button>
				</div>
			</div>
			<!-- 需求变更审核 -->
			<div class="fill_app_box" v-if="deta.pageTap == 'appChangs' && showBox">
				<!-- 待审核 -->
				<div class="item_box" v-if="deta.status == 1">
					<el-button plain class="blue-button" @click="openBox">审核</el-button>
				</div>
			</div>
			<!-- 应用实施终止 -->
			<div class="fill_app_box" v-if="deta.pageTap == 'implTer' && deta.canCancel">
				<!-- 待申报 -->
				<div class="item_box" v-if="deta.status == 1 || deta.status == 4">
					<el-button plain class="wihte-button" @click="terToEdit">编辑</el-button>
					<el-button plain class="blue-button" @click="terDeclare">申报</el-button>
					<el-button plain class="red-button" @click="terAppDel">删除</el-button>
				</div>
				<!-- 申报中 -->
				<div class="item_box" v-if="deta.status == 2">
					<el-button plain class="red-button" @click="reAppWithdraw">撤销</el-button>
				</div>
				<!-- 通过 -->
				<div class="item_box" v-if="deta.status == 3">
					<el-button v-if="deta.checkFlag == '0' && deta.changeFlag != '1'" plain class="blue-button" @click="terToApplication(4)"
						>应用验收</el-button
					>
					<el-button plain class="wihte-button" @click="terToApplication(1)">填写中后期资料</el-button>
				</div>
			</div>
			<!-- 应用实施终止审核 -->
			<div class="fill_app_box" v-if="deta.pageTap == 'implTers' && showBox">
				<!-- 待审核 -->
				<div class="item_box" v-if="deta.status == 1">
					<el-button plain class="blue-button" @click="openBox">审核</el-button>
				</div>
			</div>
		</div>

		<!--发起流程 submitPass 为审核成功后的回调函数 -->
		<Start ref="startRef" @submitPass="submitPass"></Start>
		<!-- 审核弹框 -->
		<ExamineBox ref="examineBoxRef" @submitPass="submitPass"></ExamineBox>
	</div>
</template>

<script lang="ts" setup>
import HyPageHeader from '/@/components/HyPageHeader/index.vue';
import Schedule from '@cqdcg/admin/views/flow/task/Schedule/index';
import History from '@cqdcg/admin/views/flow/task/History/index';
import HyCard from '/@/views/digitalList/detail/components/Card.vue';
import Unit from './components/unit.vue';
import kouJibm from './components/kouJibm.vue';
import accep from './components/accep.vue';
import chengInfo from './components/chengInfo.vue';
import endApp from './components/endApp.vue';
import mittBus from '/@/utils/mitt';
import { removeImplementation, appImplementationSubmit, checkDataDetail } from '/@/api/Implementation/addImple';
import { changeDelete, changeSubmit, terminateDelete, terminateSubmit } from '/@/api/Implementation/tableImple';
import { ElMessage, ElMessageBox } from 'element-plus';
import { computed, ref, reactive, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import Start from '@cqdcg/admin/views/flow/form/tools/startFlow'; //申报组件
import ExamineBox from '@cqdcg/admin/views/flow/task/examineBox'; //审核组件
import { cancel } from '@cqdcg/admin/views/flow/task/cancel'; //撤销
const route = useRoute();
const router = useRouter();
onMounted(() => {
	let data: any = route.query;
	//判断是那个页面跳过来的
	deta.value.pageTap = data.pageTap;
	deta.value.changeFlag = data.changeFlag; //判断是否在申报中
	deta.value.id = data.id;
	deta.value.reallyId = data.reallyId || -123; //变更和终止真实id
	deta.value.appCode = data.appCode;
	deta.value.instanceId = data.instanceId;
	deta.value.title = data.title;
	deta.value.status = data.status;
	deta.value.logStatus = data.logStatus;
	deta.value.processInstanceId = data.processInstanceId;

	let canCancel = data.canCancel;
	if (canCancel == 'false') {
		//不能撤销时给按钮禁用
		deta.value.canCancel = false;
	}

	//审核的额外参数值
	flowData.value.nodeId = data.nodeId;
	flowData.value.taskId = data.taskId;
	flowData.value.processInstanceId = data.processInstanceId;
	flowData.value.appCode = data.id;

	//判断是否有按钮框
	if (data.pageTap == 'impDecs' || data.pageTap == 'appChangs' || data.pageTap == 'implTers') {
		if (data.status != '1') {
			showBox.value = false;
		}
	}
	//详情
	getDetail();
});
const boxloading = ref(false);
const showBox = ref(true);
function handleBack() {
	window.history.length > 1 ? router.go(-1) : router.push('/');
}
let deta: any = ref({
	//页面状态,
	pageTap: '',
	changeFlag: '', //判断是否在申报中
	id: '',
	reallyId: null, //真实id 查询变更和终止的历史记录
	appCode: '',
	instanceId: '',
	logStatus: '',
	//判断是否验收
	checkFlag: '',
	canCancel: true, //是否可以撤销
	//标题
	title: '',
	// 返回的状态
	status: null,
	//流程id
	processInstanceId: '',

	reviseVisible: false,
	//审核弹窗
	centerDialogVisible: false,
});

//获取实施方案申报详情数据
const getDetail = () => {
	let id = deta.value.id;
	let reallyId = deta.value.reallyId || -123;
	boxloading.value = true;
	checkDataDetail({ implementationId: id, reallyId: reallyId })
		.then((res) => {
			boxloading.value = false;
			if (res.code == 0) {
				data.info = res.data.implementation;
				data.appCheck = res.data.implementation?.appCheck;
				// let arr = res.data?.implementationChangeLog;
				// //判断有没有应用或终止，1是变更 2是终止
				data.change = res.data?.implementationChangeLog.change;
				data.terminate = res.data?.implementationChangeLog.terminate;
				//本地状态
				deta.value.logStatus = res.data.implementation.logStatus;
				//判断是否验收
				deta.value.checkFlag = res.data.implementation.checkFlag;

				getStatus(res.data);
			}
		})
		.catch((res) => {
			boxloading.value = false;
		});
};
//获取数据状态
const getStatus = (data: any) => {
	if (deta.value.pageTap == 'impDec') {
		deta.value.status = data.implementation.implementationStatus;
	}
	if (deta.value.pageTap == 'appChang') {
		deta.value.status = data.implementationChangeLog.change.status;
	}
	if (deta.value.pageTap == 'implTer') {
		deta.value.status = data.implementationChangeLog.terminate.status;
	}
};

let data = reactive({
	//基本详情信息
	info: {},

	//应用变更
	change: {
		appCode: '',
		status: '',
	},
	//应用终止
	terminate: {
		appCode: '',
		status: '',
	},
	//验收材料
	appCheck: {
		appCode: '',
		status: '',
	},
});

//审核弹窗列表
let sech = reactive({
	taskId: '',
	nodeId: '',
	appCode: '',
	pass: '',
	advice: '',
	files: '',
	end: '',
});

//实施方案申报================
//编辑
const toEdit = () => {
	let appCode = deta.value.appCode;
	let id = deta.value.id;
	router.push({
		path: '/digitalImplement/detail/appliPage',
		query: {
			id: id,
			reallyId: deta.value.reallyId,
			appCode: appCode,
			title: '实施填报',
			type: 0,
			processInstanceId: deta.value.processInstanceId,
		},
	});
};
//申报
const startRef = ref(null);
//申报
const declare = () => {
	let arr = data.info;
	//申报
	appImplementationSubmit(arr).then((res) => {
		if (res.code == 0) {
			let basicData = res.data;
			startRef?.value?.handle({
				flowName: basicData.flowName,
				businessKey: basicData.businessKey,
				paramMap: {},
			});
		}
	});
};
//删除
const appDel = () => {
	let id = deta.value.id;
	let data = { id, type: '1' };
	ElMessageBox.confirm('是否确定删除数据?', '操作确认', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(() => {
			removeImplementation(data).then((res) => {
				if (res.code == 0) {
					ElMessage({
						type: 'success',
						message: '删除成功',
					});
					//返回列表
					submitPass();
				}
			});
		})
		.catch(() => {});
};
//填写申报等信息==填写中后期资料  应用变更
const toApplication = (type: any) => {
	let id = deta.value.id;
	let appCode = deta.value.appCode;
	let instanceId = deta.value.instanceId;
	router.push({
		path: '/digitalImplement/detail/appliPage',
		query: {
			id: id,
			reallyId: deta.value.reallyId,
			appCode: appCode,
			instanceId: instanceId,
			title: '实施填报',
			type: type,
			processInstanceId: deta.value.processInstanceId,
		},
	});
};
//应用需求变更================
//编辑
const reToEdit = () => {
	let appCode = deta.value.appCode;
	let id = deta.value.id;
	router.push({
		path: '/digitalImplement/detail/appliPage',
		query: {
			id: id,
			reallyId: deta.value.reallyId,
			appCode: appCode,
			title: '实施填报',
			type: 2,
			processInstanceId: deta.value.processInstanceId,
		},
	});
};
//申报
const reDeclare = () => {
	let arr = data.change;
	//申报 改
	changeSubmit(arr).then((res) => {
		if (res.code == 0) {
			//业务代码提交成功后，使用该方法打开弹窗。
			let basicData = res.data;
			startRef?.value?.handle({
				flowName: basicData.flowName,
				businessKey: basicData.businessKey,
				paramMap: {},
			});
		}
	});
};
//删除
const reAppDel = () => {
	let id = deta.value.id;
	ElMessageBox.confirm('是否确定删除数据?', '操作确认', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(() => {
			changeDelete(id).then((res) => {
				if (res.code == 0) {
					ElMessage({
						type: 'success',
						message: '删除成功',
					});
					//返回列表
					submitPass();
				}
			});
		})
		.catch(() => {});
};
//撤销
const reAppWithdraw = () => {
	let data = {
		processInstanceId: deta.value.processInstanceId,
	};
	cancel(data)
		.then((res: any) => {
			submitPass();
		})
		.catch((err: any) => {
			console.log('取消弹框和失败回调');
		});
};
//填写中后期资料  应用变更
const reToApplication = (type: any) => {
	let id = deta.value.id;
	let appCode = deta.value.appCode;
	let instanceId = deta.value.instanceId;
	router.push({
		path: '/digitalImplement/detail/appliPage',
		query: {
			id: id,
			reallyId: deta.value.reallyId,
			appCode: appCode,
			instanceId: instanceId,
			title: '实施填报',
			type: type,
			processInstanceId: deta.value.processInstanceId,
		},
	});
};

//应用实施终止================
//编辑
const terToEdit = () => {
	let appCode = deta.value.appCode;
	let id = deta.value.id;
	router.push({
		path: '/digitalImplement/detail/appliPage',
		query: {
			id: id,
			reallyId: deta.value.reallyId,
			appCode: appCode,
			title: '实施填报',
			type: 3,
			processInstanceId: deta.value.processInstanceId,
		},
	});
};
//申报
const terDeclare = () => {
	let arr = data?.terminate;
	terminateSubmit(arr).then((res) => {
		if (res.code == 0) {
			let basicData = res.data;
			startRef?.value?.handle({
				flowName: basicData.flowName,
				businessKey: basicData.businessKey,
				paramMap: {},
			});
		}
	});
};
//删除
const terAppDel = () => {
	let id = deta.value.id;
	ElMessageBox.confirm('是否确定删除数据?', '操作确认', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(() => {
			terminateDelete(id).then((res) => {
				if (res.code == 0) {
					ElMessage({
						type: 'success',
						message: '删除成功',
					});
					//返回列表
					submitPass();
				}
			});
		})
		.catch(() => {});
};

//填写中后期资料  应用变更
const terToApplication = (type: any) => {
	let id = deta.value.id;
	let appCode = deta.value.appCode;
	let instanceId = deta.value.instanceId;
	router.push({
		path: '/digitalImplement/detail/appliPage',
		query: {
			id: id,
			reallyId: deta.value.reallyId,
			appCode: appCode,
			instanceId: instanceId,
			title: '实施填报',
			type: type,
			processInstanceId: deta.value.processInstanceId,
		},
	});
};

//审批相关数据
const approve = () => {};
const examineBoxRef: any = ref(null);
const flowData = ref<any>({
	nodeId: '',
	taskId: '',
	processInstanceId: '',
	appCode: '',
});
const openBox = () => {
	// examineBoxRef.value.dialogVisible = true;
	examineBoxRef.value.handle({
		nodeId: flowData.value.nodeId,
		taskId: flowData.value.taskId,
		processInstanceId: flowData.value.processInstanceId,
		paramMap: {},
	});
};
// 撤回
const sendBackRef: any = ref(null);
const handleApprove = () => {
	sendBackRef.value.handle({
		nodeId: flowData.value.nodeId,
		taskId: flowData.value.taskId,
		processInstanceId: flowData.value.processInstanceId,
		paramMap: {},
	});
};
//审核通过
const submitPass = () => {
	mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
	window.history.length > 1 ? router.go(-1) : router.push('/');
};
</script>

<style lang="scss" scoped>
.detail_content {
	width: 100%;
	padding: 15px;
	padding-bottom: 0px;
	.detail_box {
		width: 100%;
		height: calc(100vh - 190px);
		overflow: auto;
		display: flex;
		flex-direction: column;
		.review_progress {
			// 评审进度
			margin-bottom: 10px;
		}
		.detail {
			flex: 1;
			overflow: auto;
			.detail_left {
				.Unit_Information {
					margin-bottom: 10px;
				}
			}
		}

		.fill_app_box {
			margin-top: 10px;
			width: 100%;
			padding: 10px 0;
			text-align: center;
			box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
			flex-grow: 0;
			background-color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;

			.item_box {
				display: flex;
			}
		}
	}

	.dialogs {
		:deep(.el-dialog__header) {
			padding: 0px !important;
		}
		:deep(.el-dialog__body) {
			padding: 10px 0px !important;
		}
		.dialogs_box {
			width: 90%;
			padding: 5px;
			.diaCont {
				.diaCont_box1 {
					display: flex;
					flex-wrap: wrap;
					border-top: 1px solid black;
					.flxe_item {
						margin-right: 50px;
						margin-top: 10px;
						margin-bottom: 10px;
						display: flex;
					}
				}
				.diaCont_box2 {
					display: flex;
					flex-wrap: wrap;
					border-top: 1px solid black;
					padding-top: 10px;

					.flxe_item {
						margin-right: 50px;
						margin: 20px 0px;
						display: flex;
						align-items: center;
					}
				}
			}
		}
	}
	:deep(.h-full) {
		height: auto;
		margin-bottom: 10px;
	}
}
</style>
